<template>
  <view class="container" v-cloak>
	<view class="container-head">
		<!-- 标题 -->
		<!-- <CustomNavbar :show-back="false" title="个人中心" backgroundImage="url('/static/index_slice/my_bg.png')" backgroundColor="transparent"></CustomNavbar> -->
		<!-- 用户信息 -->
		<view class="user-section flex-between" @click="toInfo">
		  <view class="user-info">
			<image class="avatar" :src="userInfo?.avatar || '/static/index_slices/avatar.png'" mode=""></image>
		    <view class="user-info-text">
		    	<view class="username"><text>{{userInfo?.nickname || userInfo?.username || '未登录'}}</text> <image class="type" :src="'/static/index_slices/type' + parseInt(userInfo?.level) + '.png'"></image></view>
		    	<text class="phone">{{userInfo?.mobile || '未绑定手机号'}}</text>
		    </view>
			
		  </view>
		  <image class="back" :src="userInfo?.level > 0 ? '/static/index_slices/small-more.png' : '/static/index_slices/small-more.png'" mode=""></image>
		</view>
		
	</view>
    <!-- 账户信息 -->
    <u-grid :col="4" class="account-grid">
      <u-grid-item @click="toAccount('现金账户',0,parseInt(userInfo?.cash_money))">
        <text class="amount">{{parseInt(userInfo?.cash_money)}}</text>
        <text class="label">现金账户</text>
      </u-grid-item>
	  <u-grid-item @click="toAccount('复消账户',1,parseInt(userInfo?.repeat_money))">
	    <text class="amount">{{parseInt(userInfo?.repeat_money)}}</text>
	    <text class="label">复消账户</text>
	  </u-grid-item>
	  <u-grid-item @click="toAccount('生息账户',2,parseInt(userInfo?.interest_money))">
	    <text class="amount">{{parseInt(userInfo?.interest_money)}}</text>
	    <text class="label">生息账户</text>
	  </u-grid-item>
	  <u-grid-item @click="toAccount('积分账户',3,parseInt(userInfo?.score))">
	    <text class="amount">{{parseInt(userInfo?.score)}}</text>
	    <text class="label">积分账户</text>
	  </u-grid-item>
    </u-grid>

    <!-- 分享栏 -->
    <view class="share-bar">
    	<image src="/static/index_slices/go.png" mode="" @click="toInvite"></image>
    </view>
     <!-- 我的订单 -->
    <view class="order-section">
    	<view class="header">
    	  <text>我的订单</text>
    	  <text class="more" @click="toMyOrder(0)">查看全部 ></text>
    	</view>
		 <up-grid
			:col="4"
		    :border="false"
		    @click="click">
		    <up-grid-item
		        v-for="(orderListItem,orderListIndex) in orderList"
		        :key="orderListIndex" @click="toMyOrder(orderListItem.status)">
		    <up-icon
		        :customStyle="{paddingTop:31+'rpx'}"
		        :name="orderListItem.name"
		        :size="22"
		    ></up-icon>
		    <text class="grid-text">{{orderListItem.title}}</text>
		</up-grid-item>
		</up-grid>
    </view>
    <!-- 其他服务 -->
    <view class="service-section">
		<view class="header">
		  <text>其他服务</text>
		</view>
      <up-grid
      	:col="4"
          :border="false"
          @click="click">
          <up-grid-item
              v-for="(serviceListItem,serviceListIndex) in serviceList"
              :key="serviceListIndex"
			  @click="toPage(serviceListItem.url)"
			  >
			  
          <up-icon
              :customStyle="{paddingTop:31+'rpx'}"
              :name="serviceListItem.name"
              :size="22"
          ></up-icon>
          <text class="grid-text">{{serviceListItem.title}}</text>
      </up-grid-item>
      </up-grid>
    </view>
  </view>
</template>
<script setup>
	import {reactive, ref} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const userInfo = ref(null)
	const getUserInfo = () => {
		uni.$api.user.userInfo().then(res => {
			if(res.code == 200){
				res.data.level = parseInt(res.data.level);
				userInfo.value = res.data
				uni.setStorageSync('userInfo',JSON.stringify(res.data))
				serviceList.value[1].url = `/goodsPages/pages/goods/points-account?title=现金账户&index=0&price=${parseInt(userInfo.value.cash_money)}`
			}
		})
	}
	onShow(() => {
		getUserInfo()
	})
	// 创建响应式数据 
	const toAccount=(title,i,price)=>{
		uni.navigateTo({
			url:`/goodsPages/pages/goods/points-account?title=${title}&index=${i}&price=${price}`
		})
	}
	 // 我的订单
	 const toMyOrder = (status)=>{
		 uni.navigateTo({
		 	url:`/orderPages/pages/order/my-order?status=${status}`
		 })
	 }
	 // 我的订单分类
	const orderList = ref([  
	    {  
	        name: '/static/index_slices/obligation.png',  
	        title: '待付款'  ,
			status:1
	    },  
	    {  
	        name: '/static/index_slices/shipment.png',  
	        title: '待发货' ,
			status:2
	    },  
	    {  
	        name: '/static/index_slices/receiver.png',  
	        title: '待收货' ,
			status:3
	    },  
		{
		    name: '/static/index_slices/order.png',  
		    title: '售后订单' ,
			status:5
		},
	]);  
	// 其他服务
	  const serviceList = ref([
	      {  
	          name: '/static/index_slices/recharge.png',  
	          title: '我要充值'  ,
			  url:'/otherPages/pages/other/member'
	      },  
	      {  
	          name: '/static/index_slices/bonus.png',  
	          title: '我的奖金'  ,
			  url: ''
	      },  
	      {  
	          name: '/static/index_slices/team.png',  
	          title: '我的团队'  ,
			  url:'/otherPages/pages/other/team'
	      },  
	  	{
	  	    name: '/static/index_slices/transaction.png',  
	  	    title: '积分交易'  ,
			url:'/goodsPages/pages/goods/transaction'
	  	},
		{
		    name: '/static/index_slices/transaction.png',  
		    title: '积分发布'  ,
			url:'/goodsPages/pages/goods/points-release'
		},
		{
		    name: '/static/index_slices/address.png',  
		    title: '我的地址' ,
			url:'/addressPages/pages/address/receiving-address'
		},
	  ]);  
	// 创建对子组件的引用  
	const uToastRef = ref(null);  
	// 我的邀请
	const toInvite = ()=>{
		if(parseInt(userInfo.value.level) < 1){
			return uni.showToast({
				title: '无查看权限',
				icon: 'none'
			});
		}
		uni.navigateTo({
			url:'/otherPages/pages/other/invite'
		})
	}
	// 定义方法  
	const click = (name) => {  
	    if (uToastRef.value) {  
	        uToastRef.value.success(`点击了第${name}个`);  
	    }  
	};  
	const toPage = (url)=>{
		uni.navigateTo({
			url
		})
	}
	// 个人信息
	const toInfo = ()=>{
		uni.navigateTo({
			url:'/pages/my/info'
		})
	}
</script>
<style lang="scss" scoped>
.container {
	padding-bottom: 120rpx;
	background: url('/static/index_slices/my_bg.png') no-repeat;
	background-size: 100% auto;
	padding-top: 28rpx; /* 导航栏高度 */
}

.grid-text{
	margin-top: 28rpx;
}
.user-section {
  color: #fff;
  padding: 30rpx;
  border-radius: 15rpx;
  .back{
  	width: 17rpx;
  	height: 31rpx;
  }
  .user-info{
	  display: flex;
	  align-items: center;
	  image{
	  	width: 110rpx;
	  	height: 110rpx;
	  	border-radius: 50%;
	  }
	  
	  .user-info-text {
	    display: flex;
	    flex-direction: column;
		margin-left: 25rpx;
	  	
	    .username {
	      font-size: 32rpx;
	      font-weight: bold;
		  position: relative;
		  .type{
			  width: 89rpx;
			  height: 40rpx;
			  margin-left: 16rpx;
			  position: absolute;
			  top: 8rpx;
			  border-radius: 0;
		  }
	    }
	    .phone {
	      color: #FFFFFF;
		  font-size: 26rpx;
	      margin-top: 23rpx;
		  padding-left: 43rpx;
		  background: url('/static/index_slices/phone.png') no-repeat left center;
	    }
  }
  
  }
}

.account-grid {
  margin-top: 20rpx;
  padding: 30rpx 0;
  border-radius: 15rpx;
  font-size: 32rpx;
  font-weight: normal;
  color: #FFFFFF;
  .label {
    margin-top: 10rpx;
  }
}

.share-bar {
  background: #fff;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: 46rpx 46rpx 0 0;
  line-height: 1.5;
  image{
	  width: 680rpx;
	  height: 206rpx;
  }
}

.order-section {
  background: #fff;
  // margin-top: 20rpx;
  padding: 27rpx 30rpx;
  
  .header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
	
    .more {
      color: #BBBFCD;
	  font-size: 24rpx;
	  font-weight: normal;
    }
  }
}
.header{
	  color: #101624;
	  font-size: 30rpx;
	  font-weight: bold;
  }
.service-section {
  
  background: linear-gradient(to bottom, #FFFFFF, #F5F5F5);
  padding: 25rpx;
  padding-top: 80rpx;
  padding-bottom: 80rpx;
  .header{
	  margin-bottom: 28rpx;
  }
}
</style>